import React, { useEffect, useRef, useState } from 'react';
import { Button, Tabs } from 'antd';
import { PieChartOutlined, ProfileOutlined } from '@ant-design/icons';
import DownloadGraduationIntentionReport from '@/pages/GraduationSurveyTeacher/components/DownloadGraduationIntentionReport';
import HorizontalComparisonReport from '@/pages/GraduationSurveyTeacher/components/HorizontalComparisonReport';
import IntentionReportPersonal from '@/pages/GraduationSurveyTeacher/components/IntentionReportPersonal';
import AllScoreList from '../AllScoreList';
import ClassroomResultsAnalysis from '@/pages/StudentAnalysisCounsellor/components/ClassroomResultsAnalysis';
import WarningSituationAnalysis from '@/pages/StudentAnalysisCounsellor/components/WarningSituationAnalysis';
import CetScoreAnalysis from '@/pages/StudentAnalysisCounsellor/components/CetScoreAnalysis';
import OutClassResultAnasis from '@/pages/StudentAnalysisCounsellor/components/OutClassResultAnasis';
import PhysicalFitnessTest from '@/pages/StudentAnalysisCounsellor/components/Counseller/PhysicalFitnessTest';
import PrecautionStudentDetail from '@/pages/StudentAnalysisCounsellor/components/PrecautionStudentDetail';
import ScoreTwoDetailCounseller from '@/pages/StudentAnalysisCounsellor/components/Counseller/ScoreTwoDetailCounseller';

type TargetKey = React.MouseEvent | React.KeyboardEvent | string;

const Tags: React.FC = () => {
  // 向选项卡组件中添加新的选项卡。
  const add = (data: any) => {
    //参数data是被点击的学生对象
    const newActiveKey = `newTab${newTabIndex.current++}`; //生成一个新的选项卡键
    let valueTemp: any = {}; //创建存储新选项卡的配置对象
    switch (
      data.key //根据key值给对象赋值
    ) {
      case '1':
        valueTemp = {
          label: '一课详情：' + data.name,
          children: <ClassroomResultsAnalysis stuNumber={data.stuNumber} />,
          key: newActiveKey,
        };
        break;
      case '2':
        valueTemp = {
          label: '预警详情：' + data.name,
          children: <PrecautionStudentDetail stuNumber={data.stuNumber} />,
          key: newActiveKey,
        };
        break;
      case '3':
        valueTemp = {
          label: '二课详情：' + data.name,
          children: <ScoreTwoDetailCounseller stuNumber={data.stuNumber} />,
          key: newActiveKey,
        };
        break;
    }
    setItems([...items, valueTemp]); //将新生成的选项卡对象添加到原有的items数组中，形成新的选项卡配置数组
    setActiveKey(newActiveKey); //将新生成的选项卡配置数组设置为最新的状态。
  };

  //创建一个包含默认选项卡配置的对象数组defaultPanes，默认的选项卡是没有点击之前的
  const defaultPanes: any = new Array(5).fill(null).map((_, index) => {
    const id = String(index + 1);
    switch (id) {
      case '1':
        return {
          label: (
            <span>
              <b>
                <ProfileOutlined />
                第一课堂成绩及分析
              </b>
            </span>
          ),
          children: <AllScoreList add={add} />,
          key: id,
          closable: false,
        };
      case '2':
        return {
          label: (
            <span>
              <b>
                <PieChartOutlined />
                学业预警情况及分析
              </b>
            </span>
          ),
          children: <WarningSituationAnalysis add={add} />,
          key: id,
          closable: false,
        };
      case '3':
        return {
          label: (
            <span>
              <b>
                <PieChartOutlined />
                四六级成绩及分析
              </b>
            </span>
          ),
          children: <CetScoreAnalysis add={add} />,
          key: id,
          closable: false,
        };
      case '4':
        return {
          label: (
            <span>
              <b>
                <PieChartOutlined />
                第二课堂成绩及分析
              </b>
            </span>
          ),
          children: <OutClassResultAnasis />,
          key: id,
          closable: false,
        };
      case '5':
        return {
          label: (
            <span>
              <b>
                <PieChartOutlined />
                体测成绩汇总及分析
              </b>
            </span>
          ),
          children: <PhysicalFitnessTest />,
          key: id,
          closable: false,
        };
    }
  });
  //跟踪当前活动的选项卡
  const [activeKey, setActiveKey] = useState(defaultPanes[0].key);

  //存储选项卡的配置信息
  const [items, setItems] = useState(defaultPanes); //将item的值设置为defaultPanes默认选项卡

  const newTabIndex = useRef(0); //newTabIndex 被用作一个计数器，并且被初始化为0，用于跟踪标签页的索引。通过访问 newTabIndex.current 属性，可以读取或修改计数器的值，而不触发组件重新渲染。

  //处理选项卡切换事件，更新key值
  const onChange = (key: string) => {
    setActiveKey(key);
  };
  //用于移除选项卡，包括更新活动选项卡的键值和更新选项卡数组。
  const remove = (targetKey: TargetKey) => {
    const targetIndex = items.findIndex(
      //查找满足条件的元素索引
      (pane: { key: any }) => pane.key === targetKey,
    );
    const newPanes = items.filter(
      //保留结果为true的item
      (pane: { key: any }) => pane.key !== targetKey,
    );
    if (newPanes.length && targetKey === activeKey) {
      //删除的是当前浏览的界面
      const { key } =
        newPanes[
          targetIndex === newPanes.length ? targetIndex - 1 : targetIndex
        ];
      setActiveKey(key); //更新key值
    }
    setItems(newPanes); //更新面板
  };
  //处理选项卡的编辑操作
  const onEdit = (targetKey: TargetKey, action: 'add' | 'remove') => {
    if (action === 'add') {
    } else {
      remove(targetKey);
    }
  };

  return (
    <div>
      <Tabs
        hideAdd
        onChange={onChange}
        activeKey={activeKey}
        type="editable-card"
        onEdit={onEdit}
        items={items}
      />
    </div>
  );
};

export default Tags;
